<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>评论管理</BreadcrumbItem>
    </Breadcrumb>
    <Form inline :label-width="70" label-position="left" :model="search">
      <FormItem label="昵称">
        <Input type="text" v-model="search.nickname" placeholder="请输入昵称检索"/>
      </FormItem>
      <FormItem label="邮箱">
        <Input type="text" v-model="search.email" placeholder="请输入邮箱检索"/>
      </FormItem>
      <FormItem label="网址">
        <Input type="text" v-model="search.url" placeholder="请输入网址检索"/>
      </FormItem>
      <Button type="primary" style="margin-left: 30px" @click="searchClick">搜索</Button>
    </Form>
    <Table stripe row-key="id" :columns="columns" :data="data"></Table>
    <Page :current="current" :total="total" :page-size="pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
    <Modal
      title="评论内容"
      v-model="showModal"
      class-name="center-modal">
      <p>{{ showContent }}</p>
    </Modal>
  </div>
</template>

<script>
import { commentList, delComment } from '@/api/comments'

export default {
  name: 'Comment',
  data: function () {
    return {
      columns: [
        {
          type: 'index'
        },
        {
          title: '昵称',
          key: 'nickname'
        },
        {
          title: '邮箱',
          key: 'email',
          align: 'center',
          width: '200px'
        },
        {
          title: '网址',
          key: 'url'
        },
        {
          title: '系统',
          align: 'center',
          key: 'systemType',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: this.systemImg(params.row.systemType),
                width: '20px'
              }
            })
          }
        },
        {
          title: '浏览器',
          align: 'center',
          key: 'browserType',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: this.browserImg(params.row.browserType),
                width: '25px'
              }
            })
          }
        },
        {
          title: '文章标题',
          tooltip: true,
          key: 'title'
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          width: '170px'
        },
        {
          title: '更新时间',
          key: 'updateTime',
          align: 'center',
          width: '170px'
        },
        {
          title: '操作',
          key: 'action',
          width: '260px',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showModal = true
                    this.showContent = params.row.content
                  }
                }
              }, '查看内容'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '删除提示',
                      content: '是否确认删除?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        delComment(params.row.id).then(res => {
                          if (res.code === 200) {
                            this.getData()
                            this.$Message.success(res.msg)
                          }
                        })
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [],
      total: 0,
      current: 1,
      pageSize: 10,
      search: {},
      showModal: false,
      showContent: ''
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    browserImg (type) {
      switch (type) {
        case 1:
          return '/comment/ie.png'
        case 2:
          return '/comment/safari.png'
        case 3:
          return '/comment/chrome.png'
        case 4:
          return '/comment/firefox.png'
        case 5:
          return '/comment/opera.png'
      }
    },
    systemImg (type) {
      switch (type) {
        case 1:
          return '/comment/windows.png'
        case 2:
          return '/comment/mac.png'
        case 3:
          return '/comment/linux.png'
        case 4:
          return '/comment/android.png'
      }
    },
    getData () {
      commentList(this.search, this.current, this.pageSize).then(res => {
        this.current = res.data.page.current
        this.total = res.data.page.total
        this.data = res.data.page.records
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
</style>
